<script setup>

import { getRolesApi, AddRolesApi, EditRolesApi, delrolesApi } from '../../util/requrst';
import { reactive, ref } from 'vue';

const data = reactive({
  rolesList: [],
  dialogTableVisible: false,
  formData: {
    roleName: "",
    roleDesc: ""
  },
  rules: {
    roleDesc: [{
      required: true,
      message: '此项目为必填项目',
      trigger: 'blur',
    }],
    roleName: [{
      required: true,
      message: '此项目为必填项目',
      trigger: 'blur',
    }],
  },

})
// 获取角色列表
const getList = () => {
  getRolesApi().then(res => {
    data.rolesList = res.data
  })
}
// 编辑角色
const editRow = row => {

  data.dialogTableVisible = true
  data.formData.id = row.id
  data.formData.roleName = row.roleName
  data.formData.roleDesc = row.roleDesc


}
// 删除角色
const delRow = row => {
  // delroles
  delrolesApi(row).then(res => {
    getList()
  })
}
// 添加角色
const Addrole = () => {
  data.dialogTableVisible = true
}
// 提交新建角色
const submitFrom = (forEl) => {
  forEl.validate(res => {
    if (!res) {
      return
    }
    // 编辑表单
    if (data.formData.id) {
      // 表单验证通过
      EditRolesApi(data.formData).then(res => {
        if (res.data) {
          // 表单隐藏
          data.dialogTableVisible = false
          // 清空表单
          data.formData = {
            roleName: "",
            roleDesc: ""
          },
            alert("表单通过")
          // 重新获取list
          getList()

        }
      })

    }
    else {
      // 表单验证通过
      AddRolesApi(data.formData).then(res => {
        if (res.data) {
          // 表单隐藏
          data.dialogTableVisible = false
          // 清空表单
          data.formData = {
            roleName: "",
            roleDesc: ""
          },
            alert("表单通过")
          // 重新获取list
          getList()

        }
      })

    }
  })
}
const clearFrom = () => {
  data.formData = {
    roleName: "",
    roleDesc: ""
  }
}
const goback = () => {
  data.dialogTableVisible = false
  data.formData = {
    roleName: "",
    roleDesc: ""
  }
}
// 方法初始化
getList()
// 获取dom元素
const roleFrom = ref()
</script>

<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白色内容区域 -->
    <div class="page_content">
      <el-button type="primary" @click="Addrole">新建角色</el-button>
      <el-table :data="data.rolesList" style="width: 100%">
        <el-table-column prop="roleName" label="角色名" />
        <el-table-column prop="roleDesc" label="角色描述" />
        <el-table-column>
          <template #default="scope">
            <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
            <el-button type="danger" @click="delRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="data.dialogTableVisible" :title="data.formData.id ? ' 编辑角色' : '新建角色'" @close="clearFrom">
      <!-- 表单 -->
      <el-form :model="data.formData" :rules="data.rules" ref="roleFrom">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="data.formData.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="data.formData.roleDesc" placeholder="请输入角色描述" />
        </el-form-item>
      </el-form>
      <template #footer class="footer">
        <div class="flex foot-button">
          <el-button @click="goback">取消</el-button>
          <el-button type="primary" @click="submitFrom(roleFrom)">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.page_content {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  margin-top: 30px;
}
</style>